<template>
    <li :class="{ completed: todo.completed }">
      <input type="checkbox" v-model="todo.completed" @change="toggleCompleted">
      <span @click="toggleCompleted">{{ todo.text }}</span>
      <button @click="deleteTodo">删除</button>
    </li>
  </template>
  
  <script setup>
  import { defineProps, defineEmits } from 'vue';
  
  const props = defineProps({
    todo: {
      type: Object,
      required: true
    }
  });
  
  const emits = defineEmits(['toggle', 'delete']);
  
  const toggleCompleted = () => {
    emits('toggle', props.todo.id);
  };
  
  const deleteTodo = () => {
    emits('delete', props.todo.id);
  };
  </script>
  
  <style scoped>
  li {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }
  
  li.completed span {
    text-decoration: line-through;
    color: #999;
  }
  
  button {
    margin-left: 8px;
  }
  </style>    